// __dirname 当前文件所在的目录
// 不同的系统目录分隔符是不一样的

const path = require('path')

const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 绝对路径
        filename: "bundle.js"
    },
    // 所有文件都是模块
    module: {
        rules: [
            {
                test: /\.vue$/, use: 'vue-loader'
            },
            // use 是从后往前使用
            {
                test: /\.s[ca]ss$/, use: ['style-loader', 'css-loader', 'scss-loader']
            },
            {
                test: /\.m?js$/, use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            // 处理图片
            // 旧语法
            // {
            //     test: '/\.(png|jpe?g|gif|svg|webp)$)/',
            //     use: {
            //         loader: 'file-loader',
            //         options: {
            //             esModule: false
            //         }
            //     }
            // },
            // 新语法
            {
                test: '/\.(png|jpe?g|gif|svg|webp)$)/',
                type: 'asset/resource'
            }
        ]
    },
    // 插入  插件告诉vue-loader 如果vue遇到其他类型文件使用配置的rules
    plugins: [
        //  插件实例
        new VueLoaderPlugin(),
    ],
    devServer: {
        static: './dist',
        open: true,
        host: 'local-ip',
        onListening(s) {
            let { address: ads, port } = s.server.address()
            console.log('启动啦：http:' + ads + ":" + port);
        }
    },
    // 行内源代码映射
    devtool:'inline-source-map'
}